<template>
    <el-table
        class="table-mb"
        v-loading="loading"
        :data="arr_data"
        row-key="sid"
        max-height="500"
        :header-cell-style="{
            background: '#F5F7FA',
            textAlign: 'center',
        }"
        :cell-style="
            ({ column }) => {
                return {
                    textAlign:
                        column.className === 'operation-nav'
                            ? 'left'
                            : 'center',
                    paddingLeft:
                        column.className === 'operation-nav' ? '25px' : '0',
                };
            }
        "
        border
        element-loading-background="rgba(255, 255, 255, 0.6)"
    >
        <el-table-column
            prop="app_version"
            label="小程序版本"
            min-width="150"
            fixed="left"
        ></el-table-column>
        <el-table-column
            prop="user_version"
            label="模板版本号"
            min-width="150"
        ></el-table-column>
        <el-table-column
            prop="user_desc"
            label="模板描述"
            min-width="150"
        ></el-table-column>
        <el-table-column prop="commit_time" label="更新时间" min-width="160">
            <template #default="{ row }">
                {{ formatDate(row.commit_time) }}
            </template>
        </el-table-column>
        <el-table-column
            label="操作"
            width="150"
            class-name="operation-nav"
            fixed="right"
        >
            <template #default="{ row }">
                <el-button
                    v-hasPermi="['enttp:program:fallBackVersion']"
                    link
                    type="primary"
                    @click="onClickBack(row.app_version)"
                    >回退</el-button
                >
            </template>
        </el-table-column>
    </el-table>
</template>

<script setup>
import { getRevertcoderelease, backVersion } from "@/apis/system/miniapp.js";
import { inject, reactive, ref, toRefs } from "vue";
import { formatDate } from "@/assets/common/utils.js";

const emit = defineEmits(["back"]);

const $message = inject("$message");

const loading = ref(false);
const state = reactive({
    arr_data: [],
});

const { arr_data } = toRefs(state);

const pubParams = async () => {
    loading.value = true;
    const res = await getRevertcoderelease();
    if (res.data.code === 200) {
        state.arr_data = res.data.data.version_list;
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
    loading.value = false;
};

const onClickBack = async (appVersion) => {
    loading.value = true;
    const res = await backVersion({ appVersion });
    if (res.data.code === 200) {
        pubParams();
        emit("back");
    } else {
        $message({ message: res.data.msg, type: "error" });
    }
};

defineExpose({
    pubParams,
});
</script>
